<template>
    <el-dialog v-model="dialogVisible" :before-close="handleClosed">
        <el-form>
            <el-row>
                <el-form-item label="负责人" label-width="66">
                    <el-input v-model="form.emp" style="width:500px" t
                              placeholder="请输入负责人名称"></el-input>
                </el-form-item>
                <el-form-item label-width="10">
                    <el-button type="primary" @click="queryEmp">查询</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <el-result v-if="selectedEmp.idEmployee !== undefined"
                   icon="success"
                   :title="`已选择${selectedEmp.name}为负责人`"
                   sub-title="可以点击重新选择，重新制定其他负责人，或点击提交去创建仓库"
        >
            <template #extra>
                <el-button @click="handleReSelect" type="default">重新选择</el-button>
                <el-button v-loading.fullscreen.lock="screenLoading" @click="handleAdd" type="primary">提交</el-button>
            </template>
        </el-result>
        <el-table v-else :data="empData" height="300">

            <el-table-column prop="idEmployee" label="编号"></el-table-column>
            <el-table-column prop="position" label="职务"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-tooltip
                            class="item"
                            effect="dark"
                            content="绑定后，该员工将作为车间负责人"
                            placement="top-start"
                    >
                        <el-button @click="handleBind(scope.row)" plain>绑定</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import empAPI from "@/util/request-md/emp/empAPI.js";
import wareAPI from "@/util/request-md/ware/ware.js";

export default {
    props: ['wareId', 'visible'],
    emits: ['callClosed', 'callSaveSuccess'],
    name: "MakeEmpDialog",
    data() {
        return {
            screenLoading: false,
            dialogVisible: false,
            form: {
                emp: '',
                headId: '',
                wareId: -1
            },
            selectedEmp: {},
            empData: [],
        }
    },
    watch: {
        'visible'(val) {
            this.dialogVisible = val;
            this.selectedEmp = {};
        }
    },
    methods: {
        queryEmp() {
            this.loadEmpData();

        },
        handleReSelect() {
            this.selectedEmp = {};
        },
        handleAdd() {
            wareAPI.updateWare(this.form, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '绑定成功'
                    });
                    this.$emit('callSaveSuccess',this.selectedEmp);
                } else {
                    this.$message.error(`网络异常:${res.msg}`);
                }
            })
        },
        handleBind(data) {
            this.selectedEmp = data;
            this.form.headId = data.idEmployee;
            this.form.wareId = this.wareId;

        },
        handleClosed() {
            this.$emit("callClosed");
        },
        //加载数据
        loadEmpData() {
            empAPI.getEmployeesByName(this.form, (data) => {
                if (data.code === 200) {
                    this.empData = data.data;
                } else {
                    this.$message.error(`网络异常:${data.msg}`);
                }
            })
        },
    },
    mounted() {
        this.loadEmpData();
    }
}
</script>

<style scoped>

</style>